<script setup>

import {Avatar, QuestionFilled, Female, InfoFilled, Iphone, Male, UserFilled} from "@element-plus/icons-vue";
import {ElIcon} from "element-plus";
import {onBeforeUnmount, onMounted, ref} from "vue";
import moment from 'moment';

const user = ref(JSON.parse(sessionStorage.getItem("CurUser")));
function formatTime() {
  const date = moment();
  const year = date.year();
  const month = date.month() + 1;
  const day = date.date();
  const hour = date.hours();
  const minute = date.minutes();
  const second = date.seconds();
  const weekday = date.day();
  const week = switchWeek(weekday);
  return `${year}.${formatTwoDigits(month)}.${formatTwoDigits(day)} ${week} ${formatTwoDigits(hour)}:${formatTwoDigits(minute)}:${formatTwoDigits(second)}`;
}

function switchWeek(days) {
  let res;
  switch (days) {
    case 0:
      res = "星期日";
      break;
    case 1:
      res = "星期一";
      break;
    case 2:
      res = "星期二";
      break;
    case 3:
      res = "星期三";
      break;
    case 4:
      res = "星期四";
      break;
    case 5:
      res = "星期五";
      break;
    case 6:
      res = "星期六";
      break;
    default:
      res = "";
  }
  return res;
}

function formatTwoDigits(n) {
  return n < 10 ? '0' + n : n;
}

const monthTime = ref(null)
//将setInterval函数赋予timeChange 变量等下好关闭使用
const timeChange = ref(null)

//生命周期函数
onMounted(() => {
  timeChange.value = setInterval(() => {
    //将值时间赋予monthTime变量
    monthTime.value = formatTime();
  }, 1000);
})

// 销毁生命周期
onBeforeUnmount(() => {
  if (timeChange) {
    clearInterval(timeChange);
  }
});
</script>

<template>
  <div class="div">
    <h1 style="text-align: center">{{'欢迎你!' + user.no}}</h1>
    <el-descriptions :column="2" border label-position="top">
      <el-descriptions-item label="Label" :span="24">
        <template v-slot:default="title">
          <div style="text-align: center">个人中心</div>
        </template>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <UserFilled></UserFilled>
          </el-icon>
          实名
        </template>
        {{ user.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <Iphone></Iphone>
          </el-icon>
          电话
        </template>
        {{ user.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <InfoFilled/>
          </el-icon>
          性别
        </template>
        <el-tag :type="user.sex === 0 ? 'danger' : (user.sex === 1 ? 'primary' : 'success')"
                disable-transitions>
                <el-icon size="15px">
                  <component :is="user.sex === 0 ? QuestionFilled : (user.sex === 1 ? Male : Female)"></component>
                </el-icon>
          {{ user.sex === 0 ? '未知' : (user.sex === 1 ? '男' : '女') }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <Avatar></Avatar>
          </el-icon>
          角色
        </template>
        <el-tag
            type="success"
            disable-transitions>{{ user.roleLevel === 0 ? "超级管理员" : (user.roleLevel === 1 ? "管理员" : "普通用户") }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <div style="text-align: center">
      <span style="text-align: center; font-size: 20px">{{'今天是:' + monthTime}}</span>
    </div>
  </div>
</template>

<style scoped>
.div {
  height: 824px;
  width: 100%;
}
</style>